<template>
  <li class="nav-item">
    <div class="submenu-item">
      <a
        class="dropdown-item"
        href="#"
        :class="{ active: isActive(item) }"
        @click.prevent="hasChildren ? toggleSubmenu() : handleClick(item)"
      >
        {{ item.name }}
        <!-- 添加调试信息 -->
        <!-- <span style="font-size: 10px; color: red;">({{ JSON.stringify(item.children) }})</span> -->

        <!-- 确保只有在子菜单数组存在且长度大于0时才显示箭头 -->
        <i
          v-if="Array.isArray(item.children) && item.children.length > 0"
          class="fa fa-angle-down submenu-icon"
          :class="{ 'is-open': isOpen }"
        ></i>
      </a>
      <!-- 同样确保子菜单列表只在真正有子菜单时显示 -->
      <ul
        v-if="Array.isArray(item.children) && item.children.length > 0"
        class="submenu-list"
        :class="{ 'is-open': isOpen }"
      >
        <MobileMenuItem
          v-for="child in item.children"
          :key="child.index"
          :item="child"
          :active-index="activeIndex"
          @select="handleSelect"
        />
      </ul>
    </div>
  </li>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute } from "vue-router";

const props = defineProps<{
  item: any;
  activeIndex?: string;
}>();

const emit = defineEmits(["select"]);
const route = useRoute();
const isOpen = ref(false);

// 更严格地检查子菜单
const hasChildren = computed(() => {
  return Array.isArray(props.item.children) && props.item.children.length > 0;
});

const isActive = (item: any) => {
  if (item.path === "/share") {
    return route.query.classId === item.query?.classId?.toString();
  }
  return route.path === item.path;
};

const handleClick = (item: any) => {
  console.log("Clicked item:", item); // 添加调试日志
  emit("select", item);
};

const handleSelect = (item: any) => {
  emit("select", item);
};

const toggleSubmenu = () => {
  isOpen.value = !isOpen.value;
};
</script>

<style lang="scss" scoped>
.submenu-item {
  position: relative;

  .dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 30px;
  }

  .submenu-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;

    &.is-open {
      transform: translateY(-50%) rotate(180deg);
    }
  }
}

.submenu-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-left: 15px;
  list-style: none;
  padding: 0;

  &.is-open {
    max-height: 1000px; // 足够大的高度以显示所有内容
  }

  .dropdown-item {
    padding-left: 25px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 10px;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      transform: translateY(-50%);
      opacity: 0.5;
    }
  }
}

.dropdown-item {
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 16px;
  transition: all 0.3s ease;

  &:hover,
  &.active {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
  }
}
</style>
